<template>
	<u-navbar placeholder title="个人中心" leftIcon=""></u-navbar>


	<view class="promotion_item" @click="mackCode">

	</view>

	<u-popup :show="state.showCodePopup" mode="center" @close="state.showCodePopup = false">
		<view class="image_view">
			<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
		</view>
		<view class="btn_group">
			<view @click="state.showCodePopup = false" class="btn_item btn_close">关闭</view>
			<view @click="saveImage" class="btn_item btn_save">下载</view>
		</view>
	</u-popup>


	</view>

</template>

<script setup>
	import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	import {
		reactive,
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		useStore
	} from 'vuex';


	const store = reactive(useStore())
	const state = reactive({
		showCodePopup: false,
	})


	const mackCode = () => {
		uni.showLoading()
		state.showCodePopup = true
		var qr = new UQRCode();
		// 设置二维码内容
		qr.data = invite.value
		// 设置二维码大小，必须与canvas设置的宽高一致
		qr.size = 200;
		// 调用制作二维码方法
		setTimeout(() => {
			qr.make();
			// 获取canvas元素
			var canvasContext = uni.createCanvasContext('qrcode'); // 如果是组件，this必须传入
			console.log(canvasContext);
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
			uni.hideLoading()
		}, 500)
	}


	const invite = computed(() => {
		return BASE_URL + '/h5/#/pages/register/register?invite=' + state.userInfo.invite
	})




	const saveImage = () => {
		setTimeout(() => {
			uni.canvasToTempFilePath({
				canvasId: 'qrcode',
				fileType: 'png',
				width: 260,
				height: 260,
				success: res => {
					var oA = document.createElement("a");
					oA.download = 'ercode'; // 设置下载的文件名，默认是'下载'
					oA.href = res.tempFilePath; //临时路径再保存到本地
					document.body.appendChild(oA);
					oA.click();
					oA.remove();

					state.showCodePopup = false
					uni.showToast({
						title: '下载成功'
					})
				},
				fail: err => {
					console.log(err);
				}
			}, );
		}, 300)
	}







	onShow(() => {
	})
</script>

<style lang='scss' scoped>
	page {
		background-color: #EEEEEE;
	}

	.image_view {
		width: 240px;
		height: 240px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn_group {
		display: flex;
		justify-content: space-around;
		padding-bottom: 10px;
		width: 100%;
		position: relative;
		z-index: 10;

		.btn_item {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			height: 40px;
			width: 40%;
		}

		.btn_close {
			background-color: $common-blue;
		}

		.btn_save {
			background: linear-gradient(90deg, #f7c097, #f6e0af);
			/* background-image: linear-gradient(to right); */
		}
	}
</style>